<template>
  <div class="view-table">
    <Ctable
      :crudAddConfig="crudAddItemConfig"
      :crudEditConfig="crudEditConfig"
      :crudConfig="crudConfig"
      @rowEdit="rowEdit"
      @cellEdit="cellEdit"
      :scroll="scroll"
      @selectRemove="selectRemove"
      @selectAll="tableSelectAll"
      @select="tableSelect"
      :columns="columns"
      :dataSource="dataSource"
      :options="options"
    >
      <template v-slot:header>
        <a-button danger @click="buttonClick">插槽按钮</a-button>
        <a-select v-model:value="selectValue" style="width: 140px" :loading="loadingSelect" @change="selectChange">
          <a-select-option value="lucy">插槽选项 1</a-select-option>
          <a-select-option value="Jack">插槽选项 2</a-select-option>
        </a-select>
        <a-input-search style="width: 200px" v-model:value="searchValue" placeholder="插槽 input search" enter-button @search="onSearch" />
      </template>
    </Ctable>
  </div>
</template>

<script lang="ts" setup name="vtable">
import { columns, options, scroll, crudConfig, crudAddItemConfig, crudEditConfig } from './index'
import { getTableData } from '@/mork/tableData'
import { bindButtonClickEvent, bindClickEvent, useForm } from '@/components/Table/index'
import { message } from 'ant-design-vue'
import { TableRecordType } from '@/components/Table/types'

/**
 * setup
 * @param {*}
 * @returns
 */

const rowEdit = (record: TableRecordType) => {
  console.log(record)
}

// 插槽按钮
const buttonClick = () => {
  message.info('插槽按钮')
}

// 插槽搜索框
const searchValue = ref()
const onSearch = () => {
  message.info('插槽搜索框')
}

// 插槽下拉选择
const selectValue = ref('插槽下拉选择')
const loadingSelect = ref(false)
const selectChange = () => {
  loadingSelect.value = true
  message.info('插槽下拉选择')
  setTimeout(() => {
    loadingSelect.value = false
  }, 1000)
}

// 表格数据源
const dataSource = ref<any[]>([])

getTableData('123456').then((res: any) => {
  dataSource.value = res.data
})

// 删除按钮事件
const selectRemove = (selectList: (string | number)[]) => {
  message.info('选择删除按钮')
  console.log('selectRemove', selectList)
}

const tableSelect = (record: TableRecordType, selected: any, selectedRows: any) => {
  // console.log(record, selected, selectedRows)
  message.info('单选')
}
const tableSelectAll = (selected: any, selectedRows: any, changeRows: any) => {
  // console.log(selected, selectedRows, changeRows)
  message.info('全选')
}

const add = (record: TableRecordType, index: string | number) => {
  console.log('添加', record, index)
}

const remove = (record: TableRecordType, index: string | number) => {
  console.log('删除', record, index)
}

// 单个单元格编辑
const cellEdit = (record: any) => {
  message.info('单个单元格编辑')
  console.log('单个单元格编辑', record)
}

// 普通列点击
const itemClick = (text: string | number, record: any) => {
  console.log(text, record)
  message.info('普通列点击')
}

if (columns) {
  // 给操作栏绑定点击事件
  bindButtonClickEvent(columns, 'remove', remove)
  bindButtonClickEvent(columns, 'add', add)

  // 给普通列绑定点击事件
  bindClickEvent(columns, 'name', itemClick)
}
</script>

<style lang="less">
@import './index.less';
</style>
